<template>
  <div class="app">
    
    <div class="layout">
     
      <header>
        <div class="swiper-info">
          <swiper :options="swiperOption">
            <swiper-slide v-for="(slide,index) in swiperList" :key="index">{{ slide }}</swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
        <div class="more">更多</div>
      </header>
      <ul class="nav">
        <li><img src="../static/img/logo.png" alt="">
          <span style="font-weight:700;font-size:20px;">MyToken</span>
        </li>
        <li>
          <i class="fa  fa-bar-chart fa-lg" style=" color: rgba(0,0,0,.54);"></i>行情</li>
        <li>
          <i class="fa  fa-align-left fa-lg" style=" color: rgba(0,0,0,.54);"></i>早知道</li>
      </ul>
      <!-- 公告信息 -->
      <div class="mt-header" >
        <div class="mt-widget-header">
          <div  id="xx" style=" position:relative;left:0px;right:-300px;">
            <a target="_blank" href="" v-for="(item,index) in  widget" :key="index" style="margin-right:20px;">
              <span style="margin-right: 3px;">{{item.name}}</span>
              <span style="margin-right: 5px;">{{item.price}}</span>
              <span :style="{color:item.state>0 ? 'green':'red' }">{{item.state}}%</span>
            </a>
          </div>

        </div>
      </div>
      <!-- 内容 -->
      <div class="main-content">
        <div class=" content-basic clearfix">
          <div class="content-left">
            <div style="border-bottom:1px solid #fff;color: rgba(0,0,0,.87);font-size:20px;">行情</div>
            <div class="content-list">
              <!--<router-link :to="{name:'favorite'}">自选</router-link>-->
              <router-link :to="{name:'search'}">币搜索</router-link>
              <router-link :to="{name:'ticker'}">全部行情</router-link>
              <router-link :to="{name:'exchangelist'}">交易所</router-link>
              <router-link :to="{name:'currencystats'}">币热度</router-link>
              <router-link :to="{name:'exchangestats'}">交易所热度</router-link>
            </div>
          </div>
          <div class="content-right">
            <div class="content-title">{{contentTitle}}</div>

            <router-view/>
          </div>
        </div>

      </div>
    </div>

    <footer class="footer clearfix">

      <div class=" clearfix">
        <p>APP</p>
        <a href="">ios下载</a>
        <a href="">安卓下载</a>
        <a href="">MAC版</a>
        <a href="">网页版</a>

      </div>
      <div class=" clearfix">
        <p>社交帐号</p>

        <a href="">微信</a>
        <a href="">公众号</a>
        <a href="">微博</a>
        <a href="">Twitter</a>

      </div>

    </footer>
  </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "app",
  data() {
    return {
      // 头部轮播图数据
      swiperList: [
        "#早知道#",
        "上线美蜜（BEC）交易的公;#早知道#",
        "LBank上线美蜜（BEC）交易的公告;#早知道#",
        "交易的公告;#早知道#"
      ],
      swiperOption: {
        notNextTick: true,
        autoplay: true,
        //  手势
        grabCursor: true,
        //  flex布局
        setWrapperSize: true,

        paginationClickable: true,
        //  可用鼠标滑动
        mousewheelControl: true,

        observeParents: true
      },
      widget: [
        { name: "BTC:", price: "¥61,141.18", state: -0.5 },
        { name: "EOS:", price: "¥53,88.45", state: +0.23 },
        { name: "NEO:", price: "¥65,656.77", state: -6.5 },
        { name: "LTC:", price: "¥545,432.343", state: +0.86 },
        { name: "BTC:", price: "¥61,141.18", state: -0.5 },
        { name: "EOS:", price: "¥53,88.45", state: +0.23 },
        { name: "NEO:", price: "¥65,656.77", state: -6.5 },
        { name: "LTC:", price: "¥545,432.343", state: +0.86 },
         { name: "BTC:", price: "¥61,141.18", state: -0.5 },
        { name: "EOS:", price: "¥53,88.45", state: +0.23 },
        { name: "NEO:", price: "¥65,656.77", state: -6.5 },
         { name: "BTC:", price: "¥61,141.18", state: -0.5 },
        { name: "EOS:", price: "¥53,88.45", state: +0.23 },
        { name: "NEO:", price: "¥65,656.77", state: -6.5 },
      ],
      // 列表标题
      contentTitle: ""
    };
  },
  methods:{
  
  ls(){
    var p=true;//开关,true开,false关
    var xx=document.getElementById('xx');
    var xxleft = parseInt(xx.style.left);
    var xxright = parseInt(xx.style.right);
    console.log('xxright:',xxright);
    console.log('xxleft:',xxleft);
    var speed = 20;
    var t=setInterval(rollLeft,speed);
    //向左移动
    function rollLeft(){
      if(p){
        xxleft--;
        xx.style.left = xxleft+'px';
        if(xxleft <=-300 ){
          clearInterval(t);
          t=setInterval(rollRight,speed);
        }
      }
    }

   
    //向右移动
    function rollRight(){
      if(p){
        xxleft++;
        xx.style.left = xxleft+'px';
        if(xxleft >= 0){
          clearInterval(t);
          t=setInterval(rollLeft,speed);
        }
      }
    }

  }
  },
  mounted() {
    this.ls()
    this.contentTitle = this.$route.meta.title;
  },
  updated() {
    this.contentTitle = this.$route.meta.title;
  },
  components: { swiper, swiperSlide }
};
</script>

<style scoped lang="scss">
.app {
  height: 100%;
  width: 100%;
  overflow: auto;
  .layout{
    // height: 100%;
     background-color: #f5f5f5;
    width: 100%;
    padding-bottom:180px;
    header {
    width: 100%;
    height: 40px;
    color: #fff;
    background: #000;
    text-align: center;
    line-height: 40px;
    .swiper-info {
      height: 100%;
      display: inline-block;
      width: 70%;
      vertical-align: middle;
      .swiper-slide {
        text-align: left;
      }
    }
    .more {
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
  }
  .nav {
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding: 0 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    background: #fff;
     font-size: 14px;
   
    img {
      width: 35px;
      vertical-align: middle;
      margin-right: 5px;
    }
    li {
      display: inline-block;
      padding-right: 30px;
        color:#333;
    }
  }
  .mt-header {
    width: 100%;
    white-space: nowrap;
    overflow: scroll;
     font-size: 12px;
    .mt-widget-header {
      padding: 3px;
      width: auto;
      margin-right: 20px;
      a {
        color: #484848;
      }
    }
  }
  .main-content {
    width: 100%;
margin:0 auto;
    max-width: 1080px;
   
    margin-top: 50px;
    background-color: #f5f5f5;
    position: relative;
    .content-basic {
      position: relative;
      margin: 0 auto;
      .content-left {
        height: 100%;
        float: left;
        width: 20%;
        padding-left: 20px;
        padding-top: 48px;
        a {
          color: rgba(0, 0, 0, 0.87);
          display: block;
          padding: 12px 0;
          transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
          &.router-link-active {
            background: #fff;
            color:#007aff;
          }
        }
      }

      .content-right {
        height: 100%;
        float: left;
        width: 80%;
       
        .content-title {
          height: 48px;
          font-size: 20px;
          line-height: 48px;
          
        }
      }
    }
  }
  }

  .footer {
    width: 100%;
    background: #000;
    padding: 30px;
    font-size: 18px;
    position: relative;
    bottom: 0;
    div {
      float: left;
      width: 80px;
      margin-right: 50px;
      height: 100%;
      p {
        color: #ccc;
        margin-bottom: 20px;
      }
      a {
        display: block;
        margin: 10px 0;
        color: #fff;
      }
    }
  }
}

</style>
